<template>
  <div class="box">
    <div class="login">
      <h1>客户关系管理系统</h1>
      <input type="text" v-model="list.name" placeholder="请输入用户名" />
      <input type="text" v-model="list.pwd" placeholder="请输入密码" />
      <button @click="deng">登录</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { login } from "../../api/api";
import { useRouter } from "vue-router";

const router = useRouter();

const list = reactive({
  name: "",
  pwd: "",
});

const deng = () => {
  login(list.name, list.pwd).then((res) => {
    if (res.data.code == -1) {
      alert("用户不存在");
    }
    if (res.data.code == 0) {
      alert("密码不正确");
    }
    if (res.data.code == 1) {
      let token = res.data.token;

      localStorage.setItem("token", token);
      router.push("/home");
    }
  });
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
}
.login {
  /* border: 1px solid #ccc; */
  height: 100px;
  width: 600px;
  position: fixed;
  top: calc(50% - 100px);
  left: calc(50% - 300px);
  background-color: rgba(0, 0, 0, 0.299);
}
h1 {
  text-align: center;
}
input {
  margin-left: 60px;
  outline-style: none;
  border: none;
}
button {
  margin-left: 60px;
}
</style>
